<template>
  <div class="menu-card" @click="$emit('click')">
    <img class="menu-card__img" :src="src" alt="" />
  </div>
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        default: undefined
      }
    }
  };
</script>

<style scoped lang="less">
  .menu-card {
    display: inline-block;
    width: calc((100% - 15px) / 2);
    height: 80px;
    vertical-align: top;
    border-radius: 6px;

    & + & {
      margin-left: 15px;
    }

    &__img {
      display: inline-block;
      width: 100%;
      height: 100%;
      vertical-align: top;
      object-fit: cover;
    }
  }
</style>
